import { NavBar, DatePicker } from "antd-mobile";
import { useState, useMemo, useEffect } from "react";
import classNames from "classnames";
import "./index.scss";
import dayjs from "dayjs";
import { useSelector } from "react-redux";
import _ from "lodash"
import DailyBill from "./components";

const Month = () => {
  const billList = useSelector(state => state.bill.billList)
  const monthGroup = useMemo(() => {
    // return出去计算之后的值
    return _.groupBy(billList, item => dayjs(item.date).format("YYYY-MM"));
  }, [billList])
  // 日期弹开的打开和关闭
  const [dateVisible, setDateVisible] = useState(false);
  // 控制时间显示
  const [dateText, setDateText] = useState(dayjs().format("YYYY-MM"));

  const [currentMonthList, setMonthlist] = useState([])
  const monthResult = useMemo(() => {
    const pay = currentMonthList.filter(item => item.type === 'pay').reduce((total, item) => total + item.money, 0)
    const income = currentMonthList.filter(item => item.type === 'income').reduce((total, item) => total + item.money, 0)
    return { pay, income, total: pay + income }
  }, [currentMonthList])

  // 初始化的时候把当前月的统计数据显示出来
  useEffect(() => {
    const nowDate = dayjs().format('YYYY-MM')
    // 边界值控制
    if (monthGroup[nowDate]) {
      setMonthlist(monthGroup[nowDate])
    }
  }, [monthGroup])

  // 确认回调
  const handleSelectDate = (e) => {
    setDateVisible(false);
    const formatDate = dayjs(e).format("YYYY-MM")
    setMonthlist(monthGroup[formatDate])
    setDateText(formatDate);
  };

  // 当前月按日来做分组
  const dayGroup = useMemo(() => {
    // return出去计算之后的值
    const groupData = _.groupBy(currentMonthList, item => dayjs(item.date).format("YYYY-MM-DD"));
    const keys = Object.keys(groupData)
    return {
      groupData, keys
    }
  }, [currentMonthList])
  return (
    <div className="month ">
      <NavBar backArrow={false}>月度收支</NavBar>
      <div className="month-background-img h-full px-base py-base">
        <div
          className="flex items-center mb-base text-bold"
          onClick={() => setDateVisible(true)}
        >
          <span>{dateText}账单</span>
          <span className={classNames("arrow", dateVisible && "expand")}></span>
        </div>
        <div className="flex justify-around">
          <div className="flex col items-center">
            <span className="text-xl text-bold">{monthResult.pay.toFixed(2)}</span>
            <p>支出</p>
          </div>
          <div className="flex col items-center">
            <span className="text-xl text-bold">{monthResult.income.toFixed(2)}</span>
            <p>收入</p>
          </div>
          <div className="flex col items-center">
            <span className="text-xl text-bold">{monthResult.total.toFixed(2)}</span>
            <p>结余</p>
          </div>
        </div>
      </div>
      <DatePicker
        precision="month"
        title="记账日期"
        visible={dateVisible}
        max={new Date()}
        onClose={() => setDateVisible(false)}
        onCancel={() => setDateVisible(false)}
        onConfirm={handleSelectDate}
      />
      <div style={{height: 'calc(100vh - 245px)', overflowY: 'auto'}}>
        {dayGroup.keys.map((item) => {
          return (
            <DailyBill
              key={item}
              date={item}
              dayBill={dayGroup.groupData[item]}
            />
          );
        })}
      </div>

    </div>
  );
};

export default Month;
